<template>
    <div class="mid-title">
        <ul>
            <li v-for="item in midArr">
                <p class="number">{{parseFloat(global[item.key]) || 0}}<span>{{item.unit}}</span></p>
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "midTitle",
    props: {
        global: {
            type: Object,
            default: () => ({}),
        },
    },
    data(){
        return {
            midArr: [
                {
                    name: "总网办量",
                    key: "hallNum"
                },
                {
                    name: "本年网办量",
                    key: "monthNum"
                },
                {
                    name: "本月网办量",
                    key: "yearNum",
                },
                {
                    name: "办件评价率",
                    key: "hanlderRate",
                    unit: "%"
                },
                {
                    name: "服务满意率",
                    key: "serveRate",
                    unit: "%"
                },
            ],
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.mid-title{
    width: 842px;
    height: 83px;
    margin: 0 auto 6px;
    background: url("~@/assets/home/midTitleBg.png") no-repeat;
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 68px;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 124px;
            margin-right: 10px;
            p{
                color: rgba(255, 255, 255, 0.8);
                font-family: "Source Han Sans CN";
                font-weight: 500;
                font-size: 18px;
                line-height: 26px;
                span{
                    font-weight: 400;
                    font-size: 24px;
                }
            }
            .number{
                background: linear-gradient(180deg, rgba(255, 255, 255, 1) 14.71%, rgba(255, 167, 45, 1) 79.66%);
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent;
                font-family: "Alibaba PuHuiTi";
                font-weight: 700;
                font-size: 32px;
                line-height: 36px;
                margin-bottom: 2px;
            }
        }
    }
}
</style>
